<template>
  <view class="contacts-container">
    <!-- 搜索栏 -->
    <view class="search-section">
      <view class="search-box">
        <text class="search-icon">🔍</text>
        <input 
          class="search-input" 
          placeholder="搜索姓名"
          v-model="searchKeyword"
          @input="onSearch"
          confirm-type="search"
        />
      </view>
      
      <!-- 末级部门用户列表 - 独立显示区域 -->
      <view v-if="currentLeafDeptId" class="leaf-dept-users">
        <view class="section-title">
          部门成员 
          <text v-if="leafDeptUsers.length > 0">({{ leafDeptUsers.length }}人)</text>
          <text v-if="leafDeptUsers.length === 0" style="color: #999; font-size: 24rpx;">(暂无成员)</text>
        </view>
        
        <!-- 调试信息 -->
        <view class="debug-info">
          <text>部门ID: {{ currentLeafDeptId }}</text>
          <text>用户数: {{ leafDeptUsers.length }}</text>
          <text>显示状态: {{ leafDeptUsers.length > 0 ? '有数据' : '无数据' }}</text>
        </view>
        
        <!-- 用户列表 -->
        <view v-if="leafDeptUsers.length > 0" class="user-list-container">
          <view 
            class="user-item" 
            v-for="user in leafDeptUsers" 
            :key="user.id"
            @tap="goToChat(user.id)"
          >
            <view class="user-avatar">
              <image v-if="user.avatar" :src="user.avatar" mode="aspectFill" />
              <text v-else>{{ user.username ? user.username.charAt(0).toUpperCase() : 'U' }}</text>
            </view>
            <view class="user-info">
              <view class="user-name">{{ user.nickname || user.username || '未知用户' }}</view>
              <view class="user-mobile" v-if="user.mobile">{{ user.mobile }}</view>
              <view class="user-username" v-if="!user.nickname && user.username" style="font-size: 24rpx; color: #999;">用户名: {{ user.username }}</view>
            </view>
          </view>
        </view>
        
        <!-- 返回按钮 -->
        <view class="clear-section" @tap="clearLeafDeptUsers">
          <text class="clear-text">← 返回部门列表</text>
        </view>
      </view>
    </view>

    <!-- 显示模式切换 -->
    <view class="display-mode">
      <view 
        class="mode-tab" 
        :class="{ active: displayMode === 'user' }"
        @tap="switchMode('user')"
      >
        按用户
      </view>
      <view 
        class="mode-tab" 
        :class="{ active: displayMode === 'dept' }"
        @tap="switchMode('dept')"
      >
        按部门
      </view>
    </view>

    <!-- 面包屑导航 -->
    <view v-if="displayMode === 'dept' && breadcrumbPath.length > 0" class="breadcrumb">
      <text class="breadcrumb-item" @tap="navigateToBreadcrumb(0)">全部部门</text>
      <view v-for="(item, index) in breadcrumbPath" :key="'sep-' + item.id + '-' + index" class="breadcrumb-separator">›</view>
      <text 
        v-for="(item, index) in breadcrumbPath" 
        :key="'item-' + item.id + '-' + index" 
        class="breadcrumb-item"
        :class="{ active: index === breadcrumbPath.length - 1 }"
        @tap="navigateToBreadcrumb(index + 1)"
      >
        {{ item.name }}
      </text>
    </view>

    <!-- 内容区域 -->
    <view class="content-area">
      <!-- 按用户显示 -->
      <view v-if="displayMode === 'user'" class="user-list">
        <view 
          class="user-item" 
          v-for="user in userList" 
          :key="user.id"
          @tap="goToChat(user.id)"
        >
          <view class="user-avatar">
            <image v-if="user.avatar" :src="user.avatar" mode="aspectFill" />
            <text v-else>{{ user.username ? user.username.charAt(0).toUpperCase() : 'U' }}</text>
          </view>
          <view class="user-info">
            <view class="user-name">{{ user.nickname || user.username || '未知用户' }}</view>
            <view class="user-dept">{{ user.deptName || '无部门' }}</view>
            <view class="user-mobile" v-if="user.mobile">{{ user.mobile }}</view>
          </view>
        </view>
        <view v-if="userList.length === 0 && !loading" class="empty-tip">
          暂无用户数据
        </view>
      </view>

      <!-- 按部门显示 -->
      <view v-if="displayMode === 'dept'" class="dept-browse-area">
        <!-- 部门层级视图 -->
        <view v-if="currentDeptId === null" class="dept-list">
          <!-- 顶级部门列表 -->
          <view v-for="dept in deptTreeList" :key="dept.id" class="dept-item">
            <view 
              class="dept-main"
              @tap="browseDepartment(dept)"
            >
              <view class="dept-info">
                <view class="dept-name">
                  <text v-if="dept.children && dept.children.length > 0" class="expand-icon">
                    {{ isDeptExpanded(dept.id) ? '▼' : '▶' }}
                  </text>
                  {{ dept.name }}
                </view>
                <view class="dept-contact" v-if="dept.phone || dept.email">
                  <text v-if="dept.phone">📞 {{ dept.phone }}</text>
                  <text v-if="dept.email">📧 {{ dept.email }}</text>
                </view>
                <view class="dept-count">{{ (dept.userCount >= 100 ? '100+' : (dept.userCount || 0)) }}人</view>
              </view>
              <text class="arrow">›</text>
            </view>
          </view>
        </view>
        
        <!-- 当前部门的子部门列表 -->
        <view v-else-if="currentDeptId !== null && currentDeptUsers.length === 0" class="dept-list">
          <view v-for="dept in getCurrentDeptChildren()" :key="dept.id" class="dept-item">
            <view 
              class="dept-main"
              @tap="browseDepartment(dept)"
            >
              <view class="dept-info">
                <view class="dept-name">
                  <text v-if="dept.children && dept.children.length > 0" class="expand-icon">
                    {{ isDeptExpanded(dept.id) ? '▼' : '▶' }}
                  </text>
                  {{ dept.name }}
                </view>
                <view class="dept-contact" v-if="dept.phone || dept.email">
                  <text v-if="dept.phone">📞 {{ dept.phone }}</text>
                  <text v-if="dept.email">📧 {{ dept.email }}</text>
                </view>
                <view class="dept-count">{{ (dept.userCount >= 100 ? '100+' : (dept.userCount || 0)) }}人</view>
              </view>
              <text class="arrow">›</text>
            </view>
          </view>
        </view>

        <!-- 用户列表视图（末级部门） -->
        <view v-else-if="currentDeptUsers && currentDeptUsers.length > 0" class="user-list">
          <view class="dept-users-header">
            <text class="dept-users-title">{{ breadcrumbPath.length > 0 ? breadcrumbPath[breadcrumbPath.length - 1].name : '' }} - 成员列表</text>
            <text class="dept-users-count">(共{{ currentDeptUsers.length }}人)</text>
          </view>
          <view 
            class="user-item" 
            v-for="user in currentDeptUsers" 
            :key="user.id"
            @tap="goToChat(user.id)"
          >
            <view class="user-avatar">
              <image v-if="user.avatar" :src="user.avatar" mode="aspectFill" />
              <text v-else>{{ user.username ? user.username.charAt(0).toUpperCase() : 'U' }}</text>
            </view>
            <view class="user-info">
              <view class="user-name">{{ user.nickname || user.username || '未知用户' }}</view>
              <view class="user-dept">{{ user.deptName || '无部门' }}</view>
              <view class="user-mobile" v-if="user.mobile">{{ user.mobile }}</view>
            </view>
          </view>
        </view>

        <!-- 空状态 -->
        <view v-if="currentDeptId && (!currentDeptUsers || currentDeptUsers.length === 0) && !loading" class="empty-tip">
          该部门暂无成员
        </view>
        <view v-if="displayMode === 'dept' && currentDeptId === null && (!deptTreeList || deptTreeList.length === 0) && !loading" class="empty-tip">
          暂无部门数据
        </view>
      </view>
    </view>

    <!-- 加载状态 -->
    <view v-if="loading" class="loading-mask">
      <text class="loading-text">加载中...</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      searchKeyword: '',
      displayMode: 'user', // 'user' 或 'dept'
      userList: [],
      deptList: [],
      deptTreeList: [], // 层级化部门列表
      expandedDepts: [], // 展开的部门ID列表
      leafDeptUsers: [], // 末级部门用户列表
      currentLeafDeptId: null, // 当前显示的末级部门ID
      loading: false,
      searchTimer: null, // 搜索防抖定时器
      breadcrumbPath: [], // 面包屑导航路径
      currentDeptId: null, // 当前浏览的部门ID
      currentDeptUsers: [], // 当前部门用户列表
      viewStack: [] // 视图堆栈，用于层级导航
    }
  },
  
  methods: {
    // 面包屑导航 - 返回到指定层级
    navigateToBreadcrumb(index) {
      if (index === 0) {
        // 返回到顶级部门
        this.currentDeptId = null
        this.currentDeptUsers = []
        this.breadcrumbPath = []
        this.viewStack = []
      } else {
        // 返回到指定层级
        const targetLevel = this.viewStack[index - 1]
        this.viewStack = this.viewStack.slice(0, index)
        this.breadcrumbPath = this.breadcrumbPath.slice(0, index)
        
        if (targetLevel.type === 'dept') {
          this.currentDeptId = targetLevel.id
          this.currentDeptUsers = []
        } else if (targetLevel.type === 'users') {
          this.currentDeptId = targetLevel.parentId
          this.currentDeptUsers = targetLevel.users
        }
      }
    },
    
    // 浏览部门（新的层级浏览方式）
    browseDepartment(dept) {
      console.log('浏览部门:', dept)
      
      // 添加到面包屑
      this.breadcrumbPath.push({
        id: dept.id,
        name: dept.name,
        type: 'dept'
      })
      
      // 添加到视图堆栈
      this.viewStack.push({
        type: 'dept',
        id: dept.id,
        name: dept.name
      })
      
      // 设置当前部门
      this.currentDeptId = dept.id
      this.currentDeptUsers = []
      
      // 如果是末级部门（没有子部门），加载用户
      if (!dept.children || dept.children.length === 0) {
        this.loadDeptUsers(dept.id)
      }
      // 如果有子部门，保持当前显示为子部门列表（由getCurrentDeptChildren()处理）
    },
    
    // 加载部门用户
    async loadDeptUsers(deptId) {
      this.loading = true
      try {
        const response = await this.$api.system.dept.getDeptUsers(deptId)
        console.log('部门用户响应:', response)
        
        if (response.code === 0 || response.code === 200) {
          // 正确处理各种可能的数据结构
          let users = []
          
          if (Array.isArray(response.data)) {
            // 如果data直接是数组
            users = response.data
          } else if (response.data && response.data.list && Array.isArray(response.data.list)) {
            // 如果data包含list数组（新API格式）
            users = response.data.list
          } else if (response.data && Array.isArray(response.data.data)) {
            // 如果data包含data数组（其他格式）
            users = response.data.data
          } else if (response.data && typeof response.data === 'object') {
            // 如果data是对象，尝试提取数组
            const keys = Object.keys(response.data)
            for (let key of keys) {
              if (Array.isArray(response.data[key])) {
                users = response.data[key]
                break
              }
            }
          }
          
          console.log('解析后的用户数据:', {
            originalData: response.data,
            parsedUsers: users,
            usersCount: users.length,
            firstUser: users[0]
          })
          
          this.currentDeptUsers = users
          
          // 更新视图堆栈中的用户信息
          if (this.viewStack.length > 0) {
            const lastView = this.viewStack[this.viewStack.length - 1]
            if (lastView.type === 'dept') {
              this.viewStack.push({
                type: 'users',
                parentId: deptId,
                users: users,
                count: users.length
              })
            }
          }
          
          console.log('当前部门用户数:', this.currentDeptUsers.length)
          
          // 强制更新视图
          this.$forceUpdate()
        } else {
          uni.showToast({
            title: response.msg || '获取部门用户失败',
            icon: 'none'
          })
        }
      } catch (error) {
        console.error('加载部门用户失败:', error)
        uni.showToast({
          title: '网络错误',
          icon: 'none'
        })
      } finally {
        this.loading = false
      }
    },
    
    // 获取当前部门的子部门
    getCurrentDeptChildren() {
      if (!this.currentDeptId) {
        return []
      }
      
      // 递归查找当前部门
      const findDept = (depts, targetId) => {
        for (let dept of depts) {
          if (dept.id === targetId) {
            return dept
          }
          if (dept.children && dept.children.length > 0) {
            const found = findDept(dept.children, targetId)
            if (found) return found
          }
        }
        return null
      }
      
      const currentDept = findDept(this.deptTreeList, this.currentDeptId)
      return currentDept && currentDept.children ? currentDept.children : []
    },
    // 搜索用户（防抖优化）
    onSearch() {
      // 清除之前的定时器
      if (this.searchTimer) {
        clearTimeout(this.searchTimer);
      }
      
      // 设置新的定时器，300ms后执行搜索
      this.searchTimer = setTimeout(() => {
        if (this.searchKeyword.trim()) {
          this.searchUsers();
        } else {
          this.loadUserList();
        }
      }, 300);
    },
    
    // 清空末级部门用户列表
    clearLeafDeptUsers() {
      this.leafDeptUsers = []
      this.currentLeafDeptId = null
    },
    
    // 切换显示模式
    switchMode(mode) {
      this.displayMode = mode;
      if (mode === 'user') {
        this.loadUserList();
      } else {
        this.loadDeptList();
      }
    },
    
    // 加载用户列表
    async loadUserList() {
      this.loading = true;
      try {
        const response = await this.$api.system.user.getUserList();
        if (response.code === 0) {
          // 新API数据结构：response.data.list
          this.userList = response.data?.list || [];
        } else if (response.code === 200) {
          // 兼容旧API数据结构
          this.userList = response.data || [];
        } else {
          uni.showToast({
            title: response.msg || '获取用户列表失败',
            icon: 'none'
          });
        }
      } catch (error) {
        console.error('加载用户列表失败:', error);
        uni.showToast({
          title: '网络错误',
          icon: 'none'
        });
      } finally {
        this.loading = false;
      }
    },
    
    // 加载部门列表
    async loadDeptList() {
      this.loading = true;
      try {
        const response = await this.$api.system.dept.getDeptList();
        if (response.code === 0) {
          // 新API数据结构
          this.deptList = response.data || [];
          this.deptTreeList = this.buildDeptTree(response.data || []);
          
          // 异步更新所有部门的用户数量（不阻塞界面）
          this.updateAllDeptUserCounts();
        } else if (response.code === 200) {
          // 兼容旧API数据结构
          this.deptList = response.data || [];
          this.deptTreeList = this.buildDeptTree(response.data || []);
          
          // 异步更新所有部门的用户数量（不阻塞界面）
          this.updateAllDeptUserCounts();
        } else {
          uni.showToast({
            title: response.msg || '获取部门列表失败',
            icon: 'none'
          });
        }
      } catch (error) {
        console.error('加载部门列表失败:', error);
        uni.showToast({
          title: '网络错误',
          icon: 'none'
        });
      } finally {
        this.loading = false;
      }
    },
    
    // 构建部门树形结构
    buildDeptTree(deptList) {
      const tree = [];
      const map = {};
      
      // 创建ID映射
      deptList.forEach(dept => {
        map[dept.id] = {
          ...dept,
          children: []
        };
      });
      
      // 构建树形结构
      deptList.forEach(dept => {
        const node = map[dept.id];
        if (dept.parentId === 0 || !dept.parentId) {
          // 顶级部门
          tree.push(node);
        } else if (map[dept.parentId]) {
          // 子部门
          map[dept.parentId].children.push(node);
        }
      });
      
      return tree;
    },
    
    // 获取部门用户数量
    async getDeptUserCount(deptId) {
      try {
        const response = await this.$api.system.dept.getDeptUsers(deptId);
        if (response.code === 0 && response.data?.list) {
          return response.data.list.length;
        } else if (response.code === 200 && Array.isArray(response.data)) {
          return response.data.length;
        }
        return 0;
      } catch (error) {
        console.error(`获取部门 ${deptId} 用户数量失败:`, error);
        return 0;
      }
    },
    
    // 更新所有部门的用户数量
    async updateAllDeptUserCounts() {
      const updateDeptCount = async (dept) => {
        // 获取当前部门的用户数量
        const userCount = await this.getDeptUserCount(dept.id);
        this.$set(dept, 'userCount', userCount);
        
        // 递归处理子部门
        if (dept.children && dept.children.length > 0) {
          for (let child of dept.children) {
            await updateDeptCount(child);
          }
        }
      };
      
      // 更新所有顶级部门
      for (let dept of this.deptTreeList) {
        await updateDeptCount(dept);
      }
    },
    
    // 切换部门展开状态
    toggleDept(deptId) {
      const index = this.expandedDepts.indexOf(deptId);
      if (index > -1) {
        this.expandedDepts.splice(index, 1);
      } else {
        this.expandedDepts.push(deptId);
      }
    },
    
    // 检查部门是否展开
    isDeptExpanded(deptId) {
      return this.expandedDepts.includes(deptId);
    },
    
    // 搜索用户
    async searchUsers() {
      this.loading = true;
      try {
        const response = await this.$api.system.user.getUserList({
          nickname: this.searchKeyword
        });
        if (response.code === 0) {
          // 新API数据结构：response.data.list
          this.userList = response.data?.list || [];
        } else if (response.code === 200) {
          // 兼容旧API数据结构
          this.userList = response.data || [];
        } else {
          uni.showToast({
            title: response.msg || '搜索失败',
            icon: 'none'
          });
        }
      } catch (error) {
        console.error('搜索用户失败:', error);
        uni.showToast({
          title: '网络错误',
          icon: 'none'
        });
      } finally {
        this.loading = false;
      }
    },
    
    // 跳转到聊天
    goToChat(contactId) {
      uni.navigateTo({ url: `/pages/chat/index?contactId=${contactId}` })
    },
    
    // 跳转到部门详情
    async goToDepartment(deptId) {
      console.log('🎯 goToDepartment 被调用，部门ID:', deptId)
      // 检查是否是末级部门（没有子部门）
      const dept = this.findDeptById(this.deptTreeList, deptId)
      console.log('📋 找到的部门信息:', dept)
      console.log('🔍 是否为末级部门:', dept && (!dept.children || dept.children.length === 0))
      
      if (dept && (!dept.children || dept.children.length === 0)) {
        // 末级部门，直接在当前页面显示用户列表
        console.log('✅ 是末级部门，准备加载用户列表...')
        await this.loadLeafDeptUsers(deptId)
        console.log('📝 用户列表加载完成，当前状态:', {
          leafDeptUsers: this.leafDeptUsers,
          length: this.leafDeptUsers.length,
          currentLeafDeptId: this.currentLeafDeptId
        })
      } else {
        // 非末级部门，跳转到详情页
        console.log('🔄 非末级部门，跳转到详情页')
        uni.navigateTo({
          url: `/pages/contacts/department?deptId=${deptId}`
        })
      }
    },
    
    // 查找部门
    findDeptById(deptList, deptId) {
      for (let dept of deptList) {
        if (dept.id === deptId) return dept
        if (dept.children && dept.children.length > 0) {
          const found = this.findDeptById(dept.children, deptId)
          if (found) return found
        }
      }
      return null
    },
    
    // 加载末级部门用户
    async loadLeafDeptUsers(deptId) {
      if (this.currentLeafDeptId === deptId) {
        // 如果已经显示该部门，则清空用户列表
        this.leafDeptUsers = []
        this.currentLeafDeptId = null
        return
      }
      
      this.loading = true
      try {
        console.log('🔍 开始获取部门用户，参数 deptId:', deptId)
        const response = await this.$api.system.dept.getDeptUsers(deptId)
        console.log('📊 API响应数据:', JSON.stringify(response, null, 2))
        
        if (response.code === 0) {
          // 新API数据结构：response.data.list
          const userList = response.data?.list || []
          console.log('✅ 新API成功，用户列表长度:', userList.length)
          console.log('👥 用户数据详情:', userList)
          console.log('📋 第一个用户数据:', userList[0])
          console.log('🔍 用户字段检查:', userList.map(u => ({id: u.id, username: u.username, nickname: u.nickname, mobile: u.mobile})))
          // 关键调试：检查DOM更新
          this.$nextTick(() => {
            console.log('🎯 DOM更新完成，用户列表状态:', {
              leafDeptUsers: this.leafDeptUsers,
              length: this.leafDeptUsers.length,
              currentLeafDeptId: this.currentLeafDeptId
            })
          })
          
          this.leafDeptUsers = userList
          this.currentLeafDeptId = deptId
        } else if (response.code === 200) {
          // 兼容旧API数据结构
          const userList = response.data || []
          console.log('✅ 旧API成功，用户列表长度:', userList.length)
          console.log('👥 用户数据详情:', userList)
          this.leafDeptUsers = userList
          this.currentLeafDeptId = deptId
        } else {
          console.log('❌ API返回错误:', response.msg || '未知错误')
          uni.showToast({
            title: response.msg || '获取用户列表失败',
            icon: 'none'
          })
        }
      } catch (error) {
        console.error('❌ 获取部门用户失败:', error)
        console.error('错误详情:', error.message)
        uni.showToast({
          title: '获取用户列表失败',
          icon: 'none'
        })
      } finally {
        this.loading = false
      }
    },
    
    // 跳转到聊天
    goToChat(userId) {
      uni.navigateTo({
        url: `/pages/chat/chat?userId=${userId}`
      })
    },
  
    onLoad() {
      this.loadUserList();
    },
  
    onUnload() {
      // 清理定时器
      if (this.searchTimer) {
        clearTimeout(this.searchTimer);
      }
    }
  }
}

</script>

<style lang="scss" scoped>
.contacts-container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.search-section {
  padding: 20rpx 30rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #eee;
}

.search-box {
  display: flex;
  align-items: center;
  background-color: #f5f5f5;
  border-radius: 50rpx;
  padding: 15rpx 30rpx;
}

.search-icon {
  font-size: 32rpx;
  margin-right: 15rpx;
}

.search-input {
  flex: 1;
  font-size: 28rpx;
  color: #333;
}

.display-mode {
  display: flex;
  background-color: #fff;
  margin-bottom: 20rpx;
  border-bottom: 1rpx solid #eee;
}

.mode-tab {
  flex: 1;
  text-align: center;
  padding: 30rpx;
  font-size: 30rpx;
  color: #666;
  position: relative;
  
  &.active {
    color: #1890ff;
    font-weight: bold;
    
    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 60rpx;
      height: 4rpx;
      background-color: #1890ff;
    }
  }
}

.content-area {
  background-color: #fff;
}

.user-list,
.dept-list {
  padding: 0 30rpx;
}

.user-item {
    display: flex;
    align-items: center;
    padding: 30rpx 0;
    border-bottom: 1rpx solid #f5f5f5;
    
    &:last-child {
      border-bottom: none;
    }
  }
  
  .dept-item {
    background: #fff;
    border-bottom: 1rpx solid #f0f0f0;
    
    .dept-main {
      display: flex;
      align-items: center;
      padding: 30rpx;
      
      &.child-dept {
        padding-left: 60rpx;
        background: #fafafa;
      }
      
      .dept-info {
        flex: 1;
        
        .dept-name {
          font-size: 32rpx;
          font-weight: 500;
          color: #333;
          margin-bottom: 10rpx;
          display: flex;
          align-items: center;
          
          .expand-icon {
            margin-right: 10rpx;
            font-size: 24rpx;
            color: #999;
          }
        }
        
        .dept-contact {
          font-size: 26rpx;
          color: #666;
          margin-bottom: 10rpx;
          
          text {
            margin-right: 20rpx;
          }
        }
        
        .dept-count {
          font-size: 24rpx;
          color: #999;
        }
      }
      
      .arrow {
        font-size: 36rpx;
        color: #ccc;
        margin-left: 20rpx;
      }
    }
    
    .dept-children {
      border-top: 1rpx solid #f0f0f0;
    }
  }
  
  // 末级部门用户列表样式
  .leaf-dept-users {
    margin-top: 20rpx;
    background: #fff;
    border: 2rpx solid #007aff; /* 调试：添加边框 */
    min-height: 200rpx; /* 调试：确保容器有高度 */
    
    .section-title {
      padding: 20rpx 30rpx;
      font-size: 28rpx;
      font-weight: 500;
      color: #333;
      background: #f8f8f8;
      border-bottom: 1rpx solid #f0f0f0;
    }
    
    .user-list-container {
      border: 2rpx solid #ff0000; /* 调试：用户列表容器边框 */
      min-height: 100rpx; /* 调试：确保有内容区域 */
    }
    
    .user-item {
      display: flex;
      align-items: center;
      padding: 30rpx;
      border-bottom: 1rpx solid #f0f0f0;
      background: #fff; /* 确保背景色 */
      
      .user-avatar {
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
        background: #007aff;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 20rpx;
        overflow: hidden;
        
        image {
          width: 100%;
          height: 100%;
        }
        
        text {
          color: #fff;
          font-size: 32rpx;
          font-weight: 500;
        }
      }
      
      .user-info {
        flex: 1;
        
        .user-name {
          font-size: 32rpx;
          color: #333;
          margin-bottom: 8rpx;
        }
        
        .user-mobile {
          font-size: 26rpx;
          color: #666;
        }
      }
    }
    
    .clear-section {
      padding: 20rpx 30rpx;
      text-align: center;
      border-top: 1rpx solid #f0f0f0;
      background: #f8f8f8;
      
      .clear-text {
        color: #007aff;
        font-size: 28rpx;
      }
    }
    
    .debug-info {
      padding: 20rpx 30rpx;
      background: #f0f8ff;
      border: 1rpx solid #007aff;
      border-radius: 8rpx;
      margin: 20rpx 0;
      font-size: 24rpx;
      color: #007aff;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
  
  // 面包屑导航样式
  .breadcrumb {
    padding: 20rpx 30rpx;
    background: #f8f8f8;
    border-bottom: 1rpx solid #f0f0f0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    
    .breadcrumb-item {
      font-size: 28rpx;
      color: #007aff;
      padding: 8rpx 16rpx;
      border-radius: 6rpx;
      transition: background-color 0.2s;
      
      &:not(.active) {
        cursor: pointer;
        
        &:hover {
          background: rgba(0, 122, 255, 0.1);
        }
      }
      
      &.active {
        color: #333;
        font-weight: 500;
      }
    }
    
    .breadcrumb-separator {
      font-size: 24rpx;
      color: #ccc;
      margin: 0 8rpx;
    }
  }
  
  // 部门用户列表头部
  .dept-users-header {
    padding: 20rpx 30rpx;
    background: #f8f8f8;
    border-bottom: 1rpx solid #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    
    .dept-users-title {
      font-size: 32rpx;
      font-weight: 500;
      color: #333;
    }
    
    .dept-users-count {
      font-size: 28rpx;
      color: #999;
    }
  }

.user-avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  background-color: #1890ff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 32rpx;
  font-weight: bold;
  margin-right: 20rpx;
  overflow: hidden;
  
  image {
    width: 100%;
    height: 100%;
  }
}

.dept-avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  background-color: #1890ff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 32rpx;
  font-weight: bold;
  margin-right: 20rpx;
}

.user-info,
.dept-info {
  flex: 1;
}

.user-name,
.dept-name {
  font-size: 32rpx;
  color: #333;
  margin-bottom: 8rpx;
}

.user-dept,
.user-mobile,
.dept-count {
  font-size: 26rpx;
  color: #999;
}

.user-mobile {
  color: #666;
  margin-top: 4rpx;
}

.dept-contact {
  font-size: 24rpx;
  color: #666;
  margin: 4rpx 0;
  
  text {
    margin-right: 15rpx;
  }
}

.arrow {
  font-size: 36rpx;
  color: #ccc;
}

.empty-tip {
  text-align: center;
  padding: 100rpx 0;
  color: #999;
  font-size: 28rpx;
}

.loading-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

.loading-text {
  color: #666;
  font-size: 28rpx;
}
</style>